
<template>
    <div class="zhuye">
    	<header>
    		<span class="left"></span>
    		<span class="center">泡文化</span>
    		<router-link to='/my'><span class="right"><img src="../../static/img/logo.png"/></span></router-link>
    	</header>
    	
    	<main>
    		
    		<div class="content">
    			
    		<ul class="_ul">
    			<li>
    				<button @click="tab=1" :class="{curr:tab==1}">{{text}}</button>
    			</li>
    			<li>
    				<button @click="tab=2" :class="{curr:tab==2}">{{texttwo}}</button>
    			</li>
    			<li>
    				<button @click="tab=3" :class="{curr:tab==3}">{{textthree}}</button>
    			</li>
    		 </ul>
    		 
    		 <div class="one"  v-show="tab==1" style="display: block">
    		 <dl v-for= 'item in imges'>
    		 	<dt><router-link to='/culturetwo'><img :src="item.img"/></router-link></dt>
    		 	<dd>
    		 		<p>{{item.title}}</p>
    		 		<p>{{item.data}}</p>
    		 	</dd>
    		 </dl>
    		 
    		 </div>
    		 
    		 <div class="one"  v-show="tab==2" style="display: block">
    		 <dl v-for= 'item in chaqi'>
    		 	<dt><router-link to='/culturethree'><img :src="item.img"/></router-link></dt>
    		 	<dd>
    		 		<p>{{item.title}}</p>
    		 		<p>{{item.data}}</p>
    		 	</dd>
    		 </dl>
    		 
    		 </div>
    		 
    		 <div class="one"  v-show="tab==3" style="display: block">
    		 	<dl v-for= 'item in wenhua'>
    		 	<dt><router-link to='/cultureone'><img :src="item.img"/></router-link></dt>
    		 	<dd>
    		 		<p>{{item.title}}</p>
    		 		<p>{{item.data}}</p>
    		 	</dd>
    		 </dl>
    		 
    		 </div>
    		 
    		 
    		</div>
    		
    		
    		
    		
    		
    	</main>
    	
    	
    	
    	
 </div>	
</template>
		
    <script>
    	import axios from 'axios'
    		export default {
    			name:'warp',
		  data () {
		  	return {
		  		text:"茶艺",
		  		texttwo:"茶器",
		  		textthree:"文化",
				imges:[],
				chaqi:[],
				wenhua:[],
			   currIndex:0,
			   tab:1
		     }
		  },
		  mounted () {
		  var myswiper = new Swiper('.swiper-container', {
		              autoplay: 1000,
		              pagination: '.swiper-pagination'       
		        });
		    axios.get('../../static/json/culture1.json')
			   .then(response => {
				this.imges = response.data
				console.log(this.imges)
			});
			axios.get('../../static/json/culture2.json')
			   .then(response => {
				this.chaqi = response.data
				console.log(this.chaqi)
			});
			axios.get('../../static/json/culture3.json')
			   .then(response => {
				this.wenhua = response.data
				console.log(this.wenhua)
			})
		          
		 }
		}
    	</script>
    	
    	<style scoped lang="less">
    		@import '.././assets/less/header.less';
    		@import '.././assets/css/swiper.min.css';
    		@import '.././assets/less/culture.less';
    		
	        .curr{
	        	background: #42B983!important;
	        	color: white!important;
	        }
    	</style>
    	
   
    
